
import style from './index.module.scss'
import { Button, Input, Space } from 'antd'
import { articleList } from "@/api/api"
import { useEffect, useState } from "react"
import { useStore } from "@/store/index"
import { observer } from 'mobx-react-lite'


function Home () {
  let [inputVar, setInputVar] = useState(0)
  useEffect(() => {
    getArticleList()
  }, [])

  const { authStore, testStore } = useStore()

  const getArticleList = async () => {
    let res = await articleList({ page: 1, per_page: 10 })
    console.log(res)
  }
  const clearToken = () => {
    authStore.logout()
  }
  const changeNum = () => {
    testStore.change(inputVar)
  }
  const changeInput = (e) => {
    console.log(e.target.value)
    setInputVar(e.target.value)
  }
  // useEffect 监听数组需要解构数组对象或者新建一个数值对象
  useEffect(() => {
    console.log(1213, testStore.num)
  }, [testStore.num])
  useEffect(() => {
    console.log(1121212, testStore.arr)
  }, [testStore.arr])
  const [arr, setArr] = useState([])
  const changeArr = () => {
    arr.push(12)
    setArr([...arr])
    console.log(arr)
  }
  useEffect(() => {
    console.log('arr', arr)
  }, [arr])

  const [obj, setObj] = useState({})
  const changeObj = () => {
    // 这方法不行
    // obj.a = 1
    // setObj(obj)
    setObj({
      a: 1
    })
  }
  useEffect(() => {
    console.log('obj', obj)
  }, [obj])
  return (
    <div>Home
      <Button type='primary' onClick={clearToken}>清除token</Button>
      <Button type='primary' onClick={getArticleList}>发起get请求</Button>
      <br />
      <div>num: {testStore.num}</div>
      <Button type='primary' onClick={testStore.add}>num+</Button>
      <Button type='primary' onClick={testStore.sub}>num-</Button>
      <Button type='primary' onClick={changeArr}>监听数组</Button>
      <Button type='primary' onClick={changeObj}>监听对像</Button>
      <div>
        <Space.Compact
          style={{
            width: '100%',
          }}
        >
          <Input defaultValue="Combine input and button" value={inputVar} onChange={changeInput} />
          <Button type="primary" onClick={changeNum}>改变Num</Button>
        </Space.Compact>
        <Button type="primary" onClick={testStore.clearNum}>清空Num</Button>
      </div>
    </div>
  )
}

export default observer(Home)